<template>
	<view>
		<view class="content" v-if="goodsList.length > 0">
			<view class="list">
				<view class="li" v-for="(item,index) in goodsList" :key="index" @click="jumpTo(item)">
					<view class="li-left">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class="li-right">
						<div class="upper">
							<div class="name text-cut">{{ item.goods_name }}</div>
							<div class="pay">{{ item.goods_sales }}人付款</div>
						</div>
						<div class="lower">
							<div class="price">￥{{ item.goods_min_price }}</div>
							<view class="flex--end">
								<div class="buy">立即购买</div>
							</view>
						</div>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="empty" v-if="show">
				<view class="empty-text">
					暂时没有数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				category_id: 0,
				keywords: '',
				goodsList: [],
				page: 1,
				pageSize: 10,
				last_page: 1,
				show: false
			}
		},
		onLoad(options) {
			this.category_id = options.category_id || 0
			this.keywords = options.keywords || ''
			uni.setNavigationBarTitle({
				title: options.title || '商品列表'
			})
			this.getGoodsList()
		},
		onReachBottom() {
			let _this = this;
			// 已经是最后一页
			if (_this.page >= _this.last_page) {
				return false;
			}

			_this.page++
			_this.getGoodsList()
		},
		methods: {
			getGoodsList() {
				let _this = this
				_this.$api.get('mall.goods/category_list', {
					page: _this.page,
					page_size: _this.pageSize,
					types: 'normal',
					name: _this.keywords,
					id: _this.category_id
				}).then(res => {
					_this.show = true
					if (res.code == 1) {
						let list = _this.goodsList.concat(res.data.listdata)

						_this.goodsList = list

						_this.last_page = res.data.pagedata.last_page
					}
				}, fail => {})
			},
			jumpTo(item) {
				uni.navigateTo({
					url: '/pages/mall/detail?goods_id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
		padding-bottom: 100rpx;
	}

	.flex--end {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.text-cut {
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.p-b-20 {
		padding-bottom: 20rpx;
	}

	.content {
		width: 100%;
		overflow: hidden;

		.list {
			background-color: #FFFFFF;
			padding: 28rpx 24rpx;

			.li {
				width: 100%;
				overflow: hidden;
				height: 202rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				border-bottom: 2rpx solid #DDDDDD;
				padding-bottom: 20rpx;

				.li-left {
					width: 264rpx;
					height: 202rpx;
					border-radius: 16rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.li-right {
					width: calc(100% - 288rpx);
					height: 202rpx;
					// padding-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.upper {
						.name {
							font-weight: 800;
							font-size: 28rpx;
							color: #010101;
						}

						.pay {
							font-weight: 400;
							font-size: 20rpx;
							color: #8A8A8A;
							margin-top: 8rpx;
						}
					}

					.lower {
						// display: flex;
						// align-items: center;
						// justify-content: space-between;
						padding-bottom: 10rpx;

						.price {
							font-weight: 800;
							font-size: 32rpx;
							color: #F73830;
						}

						.buy {
							background: #000000;
							border-radius: 40rpx;
							color: #FFFFFF;
							padding: 8rpx 20rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}

	.empty {
		width: 100%;
		text-align: center;
		margin-top: 40%;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.empty-text {
			font-size: 32rpx;
			color: #999999;
			margin-top: 80rpx;
		}
	}
</style>